<template>
    <div style="padding:30px;">
        <el-alert :closable="false" title="">
            <transition name="fade-transform" mode="out-in">
                <template>
                    <div>
                        <EditButton @add="onAdd" @refresh="onRefresh" @search="onSearch" :listData="getList"
                            :filterFieldName="getFields"></EditButton>
                        <el-table v-loading="listLoading" :height="iHeight" :data="list" style="width: 100%">
                            <el-table-column prop="name" label="配色方案名称">
                            </el-table-column>
                            <el-table-column label="背景颜色">
                                <template slot-scope="scope">
                                    <el-color-picker @change="colorChange(scope.row)"
                                        v-model="scope.row.backgroundColor">
                                    </el-color-picker>
                                </template>
                            </el-table-column>
                            <el-table-column label="内容背景">
                                <template slot-scope="scope">
                                    <el-color-picker @change="colorChange(scope.row)" v-model="scope.row.contentColor">
                                    </el-color-picker>
                                </template>
                            </el-table-column>
                            <el-table-column label="文字颜色">
                                <template slot-scope="scope">
                                    <el-color-picker @change="colorChange(scope.row)" v-model="scope.row.textColor">
                                    </el-color-picker>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="150">
                                <template slot-scope="scope">
                                    <EditTableButton @click-button="handleClick" :data="scope.row"></EditTableButton>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
                        </el-pagination>
                        <edit-form @sendUpdate="update" ref="editForm"></edit-form>
                    </div>
                </template>
            </transition>
        </el-alert>
    </div>
</template>



<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { DevicesModule } from '@/store/modules/device'
import { IDeviceColor } from '@/api/types';
import EditForm from "@/views/common/edit-form.vue"
import { FormDataUtils, FormItemType, TouchType } from '@/views/common/data/ICommon';
import EditTableButton from "@/views/common/edit-table-button.vue"
import EditButton from "@/views/common/edit-button.vue"



@Component({
    name: 'Color',
    components: {
        EditForm,
        EditTableButton,
        EditButton
    }
})
export default class extends Vue {
    public list: Array<IDeviceColor> = []
    public allList: Array<IDeviceColor> = []
    public listLoading: boolean = false
    scope: any;
    $refs: any
    public iHeight = window.innerHeight - 300;
    public currentPage: number = 1;
    public pageSize: number = 10;
    public totalSize: number = 0;
    public setShowList() {
        let startIndex = this.pageSize * (this.currentPage - 1);
        this.list = this.allList.filter((value, index) => {
            return index >= startIndex && index < startIndex + this.pageSize;
        });
    }

    public getList() {
        return this.allList;
    }
    public getFields() {
        return "layoutId,name"
    }

    created() {
        this.init()
    }

    //颜色改变
    public colorChange(row: any) {
        this.update(row)
    }

    //操作相关处理
    public handleClick(type: TouchType, row: any) {
        if (type === TouchType.DELETE) {
            DevicesModule.deleteDeviceColors(row.colorId).then(v => {
                if (v) {
                    this.list = this.list.filter(value => {
                        return value.colorId != row.colorId
                    })
                }
            });
            return;
        }
        if (type === TouchType.SEE || type === TouchType.EDIT) {
            let keys = Object.keys(row)
            let data = FormDataUtils.getForms(row, "deviceColor", (key: string) => {
                return this.$t(key);
            }, type === TouchType.SEE ? keys : ['colorId'], ["updateTime", "contentColor1",
                "contentColor2", "textColor1", "textColor2", "deviceCount"], FormItemType.COLOR)
            this.$refs.editForm.showForm(data, type === TouchType.EDIT)
        } else if (type === TouchType.ADD) {
            let mod: IDeviceColor = {
                colorId: 0,
                name: "",
                backgroundColor: "",
                contentColor: "",
                textColor: ""
            }
            let data = FormDataUtils.getForms(mod, "deviceColor", (key: string) => {
                return this.$t(key);
            }, [], ["colorId"], FormItemType.COLOR)
            this.$refs.editForm.showForm(data, true)
        }
    }

    //更新成功
    public update(obj: any) {
        DevicesModule.updateDeviceColors(obj).then(v => {
            console.error(v)
            if (v === 1) {//成功了
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].colorId === obj.colorId) {
                        this.list[i].backgroundColor = obj.backgroundColor;
                        this.list[i].name = obj.name;
                        this.list[i].contentColor = obj.contentColor;
                        this.list[i].textColor = obj.textColor;
                        break;
                    }
                }
            } else if (!obj.colorId && v) {
                obj.colorId = v;
                this.list.push(obj);
            }
        }).catch(ex => {
            console.error(ex);
        })
    }

    public onAdd() {
        this.handleClick(TouchType.ADD, null);
    }

    public onRefresh() {
        console.error("onClick onRefresh");
    }

    public onSearch() {
        console.error("onClick onSearch");
    }

    public async init() {
        this.list = [];
        this.listLoading = true
        let result: any = await DevicesModule.getDeviceColors()
        this.list = result;
        this.allList = result;
        this.totalSize = this.allList.length;
        this.setShowList();
        setTimeout(() => {
            this.listLoading = false
        }, 0.5 * 1000)
    }
    public handleSizeChange(val: number) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.setShowList();
    }
    public handleCurrentChange(val: number) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setShowList();
    }
}
</script>
    